<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>deui_tab</title>
    <link rel="stylesheet" type="text/css" href="../../css/deui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/tab/deui-tab.css" />

</head>

<body>
    <div id="vm">
        <div class="deui-tab">
            <div class="deui-tab-item" v-bind:class="{deui_active: item.active}" @click=switchtabclick(item) v-for="item in deuitablists">{{item.deuitabname}}</div>
            <!-- <div class="deui-tab-item deui-active">Item1</div>
              <div class="deui-tab-item"><div></div>Item2</div>
              <div class="deui-tab-item">Item3</div>
              <div class="deui-tab-item">Item4</div>
            -->
            <div class="deui-clear"></div>

        </div>
    </div>
</body>
<script type="text/javascript" src="../../js/vue.2.5.js"></script>
<script>
    var vm = new Vue({
        el: '#vm',
        data: {
            deuitablists: [{
                deuitabname: 'item1',
                active: true
            }, {
                deuitabname: 'item1',
                active: false
            }, {
                deuitabname: 'item1',
                active: false
            }, {
                deuitabname: 'item1',
                active: false
            }]
        },
        methods: {
            init: function() {
                var _this = this;

                if ('addEventListener' in document) {
                    document.addEventListener('DOMContentLoaded', function() {
                        FastClick.attach(document.body);
                    }, false);
                }
            },
            switchtabclick: function(ret) {
                var _this = this;
                if (ret.active == false) {
                    this.deuitablists.map(function(ret, index) {
                        ret.active = false;
                    })
                    ret.active = true;
                }
            },

        }
    })
</script>

</html>
